<template>
	<div class="todofooter">
		<input type="checkbox" v-model="checkAll" />
		<span>已完成{{todoFinish}}/全部{{todoCount}}</span>
		<span class="btn btn-danger" @click="handleClear">清除已选中的选项</span>
	</div>
</template>

<script>
	export default {
		name:'todos-footer',
		data(){
			return {
			}
		},
		computed:{
			todoFinish(){
				return this.todos.reduce((count,todo) => {
					if(todo.done){
						count++
					}
					return count
				},0)
			},
			todoCount(){
				return this.todos.length
			},
			checkAll:{
				get(){
					return this.todoFinish === this.todoCount &&  this.todoCount > 0
				},
				set(value){
					// this.checkAllTodos(value)
          this.$emit('checkAll',value)
				}
			}
		},
		methods:{
			handleClear(){
				// this.clearSelected()
        this.$emit('clear')
			}
		},
		props:['todos']
	}
</script>

<style scoped>
	.todofooter{
		margin: 20px 0px;
	}
	.btn{
		display: inline-block;
		padding: 4px 10px;
		border-radius: 4px;
		float: right;
		cursor: pointer;
	}
	.btn-danger{
		background-color: red;
		color: white;
	}
</style>